<script setup>
import { localeLabels } from '@/constants'
import { setLocale } from '@/utils'
import { useI18n } from 'vue-i18n'

const { locale: i18nLocale } = useI18n({ useScope: 'global' })

function handleClick(locale) {
  i18nLocale.value = locale
  setLocale(locale)
}
</script>

<template>
  <div>
    <el-popover placement="bottom-start" :width="180" trigger="hover">
      <template #reference>
        <IconLocales class="h-5 w-5 cursor-pointer outline-none" />
      </template>
      <ul class="flex flex-col">
        <li
          v-for="locale in $i18n.availableLocales"
          :key="locale"
          class="cursor-pointer p-2 hover:text-sky-400"
          :class="locale === $i18n.locale ? 'text-sky-300' : ''"
          @click="handleClick(locale)"
        >
          {{ localeLabels[locale] }}
        </li>
      </ul>
    </el-popover>
  </div>
</template>
